<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>挑战主持人管理后台</title>
    <script src="<?=SITE_BASE_URL?>/assets/js/jquery.min.js"></script>
</head>
<style>
    body{background: #c6e2ff;}
    .top{height:auto;margin:100px auto 80px auto;}
    .top .logo{text-align: center;min-height: 100px;}
    .company{font-size:18px;line-height: 100px;}
    .bottom{background: url('<?=SITE_BASE_URL?>/assets/images/bk.png') no-repeat center;}
    .body{margin:auto;width:480px;}
    .login-form{margin-bottom: 60px;width:100%;background-color: #fff;padding-top:60px;border-radius: 20px;overflow: hidden;box-shadow: 0px 18px 14px rgba(0,0,0,0.15);  }
    .group{width:420px;border:1px solid #fff;margin:0px 30px 50px 30px;overflow: hidden;}
    .group .icon{vertical-align: middle;margin-right:30px;float:left;margin-top:8px;}
    .group input{font-size:18px;color:#777;background-color:#fff;border-radius: 40px; text-align:center;float:left;border:1px solid #c7c7c7;height:40px;vertical-align: middle;width:340px;}
    .group input:focus{outline:none;}
    .login{font-size:24px;margin-left:15px;background-color: #f7d518;color:#313131;text-align:center;height:50px;width:450px;border-radius: 50px;border:none;}
    .login:hover{background-color:#ffe;}
    input:-webkit-autofill{background-color: transparent !important;}
</style>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="top">
            <div class="logo"></div>
            <div class="company"></div>
        </div>
        <div class="bottom">
            <div class="body">
                <div class="shadow">
                    <form class="login-form">
                    <div class="group">
                        <div class="group-content">
                            <img class="icon" src="<?=SITE_BASE_URL?>/assets/images/name-icon.png" alt="">
                            <input type="text" name="user_name" placeholder="用户名" autocomplete="off">
                        </div>
                    </div>
                    <div class="group">
                        <div class="group-content">
                            <img class="icon" src="<?=SITE_BASE_URL?>/assets/images/password-icon.png" alt="">
                            <input type="password" name="password" placeholder="密码" autocomplete="off">
                        </div>
                    </div>
                    <div class="shadow"></div>
                </form>
                </div>
                <div>
                    <button type="button" class="login" onclick="Login.login()">登录</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="<?=SITE_BASE_URL?>/assets/plugins/layui/layui.all.js"></script>
</body>
</html>
<script>
    var Login = {
        urls:null,
        init:function(){
            $(function(){
                $(document).keyup(function(e){
                    if(e.keyCode == 13){
                        $(".login").click();
                    }
                });
            });
        },
        /**
         * @desc登录
         */
        login:function(){
            var userInfo = $(".login-form").serialize();
            console.log(Login.urls.login);
            $.ajax({
                url:Login.urls.login,
                type:"post",
                data:userInfo,
                dataType:"json",
                success:function(res){
                    if(res.code == 0 ){
                        layui.layer.msg(res.msg,{time:1000},function(){
                            top.location.href = res.data.location;
                        });
                    }else{
                        layui.layer.msg(res.msg,{time:1000});
                    }

                }
            });
        }
    };
    Login.urls = <?=json_encode($urls)?>;
    Login.init();
</script>